<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="app">
      <h2>什么是BFC？</h2>
      <p>
        BFC (Block formatting context) 直译为"块级格式化上下文"。<br />
        它是一个独立的渲染区域，与这个区域外部毫不相干。<br />
        即，BFC 里面的的内容再怎么发生变化，也不会影响到 BFC
        外面的布局，这一点是在网页布局中非常有用的。<br />
        先说，能形成 BFC 的条件有：
      </p>
      <p>
        1.根元素<br />
        2.float 属性不为 none <br />
        3.position 为 absolute 或 fixed <br />
        4.display 为 inline-block table-cell table-caption flex inline-flex<br />
        5.overflow 不为 visible <br>
        ps: BFC 在网页布局中经常用来清除浮动（特别是在使用 float 布局的情况下），最常被用来触发 BFC 的属性是overflow: hidden
      </p>
    </div>
  </body>
</html>
